<template>
  <!-- 是外链展示div -->
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <!-- 不是外链,展示svg -->
  <!-- v-on:事件名='事件方法'  老方法
      v-on = '{事件名:事件方法,事件名:事件方法.....}'
  -->
  <!--
    可以通过$listeners直接接收所有的事件和方法
    $listeners是vue内置的属性,收集父级给的所有属性和方法
  -->
  <!-- svg(矢量图形,放大不失真,渲染字体图标):高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。 -->
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <!-- aria-hidden="true" 这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。浏览器不读这个标签 -->
    <use :xlink:href="iconName" />
    <!-- use加载另外一个svg内容,显示在use标签位置上,(例如:项目中很多的svg文件,一处显示多个) -->
    <!-- 考use和href链接 -->
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    // 父组件传递过来的
    iconClass: {
      type: String,
      required: true
    },
    // 传入一个自定义的类名
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    // computed计算属性  直接当变量使用
    // 判断是否是外联
    isExternal() {
      // 名字和返回的函数名一致,坚定父组件传递过来的是不是外链 是外链就是true 不是就是false
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    // 设置svg设置样式类名
    svgClass() {
      // 如果外面传入自定义样式,拼接两个类名使用
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    // 外链icon的样式-用css的mask方式来渲染
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
